<template>
	<view class="login_bg">
		<view class="like_top">
			<view class="back">
				<view class="back_img" @click="personal()"><image src="../../static/images/left.png" mode="widthFix"></image></view>
			</view>
			<view class="like">编辑资料</view>
			<view class="sub" @click="yulan_personal()">预览</view>
		</view>
		
		<view class="ziliao">
			<view class="zl_pic" @click="toggle('left')">
				<view class="zl_pic_img"><image src="../../static/images/1.png" mode="widthFix"></image></view>
				<view class="touxiang_ico"><image src="../../static/images/avatar_label-d1f95e00.png" mode="widthFix"></image></view>
			</view>
		</view>
		<view >
			<uni-popup ref="popup" :type="type" :animation="true" :maskClick="true" @change="change" style="width: 100%;" @click="close">
			            <view class="aitlce" style="background-color: #000;">
							<view class="edit_pic_article_img"><image src="../../static/images/1.png" mode="widthFix"></image></view>
							<view class="_btn_w6u95_56">
								<view class="_picker_r3yxg_1_picker_w6u95_69">
									<view  class="_inner_r3yxg_4">更换头像</view>
									<input type="file" class="_input_r3yxg_9" accept="image/*">
								</view>
							</view>
			            </view>
			</uni-popup>
		</view>
		<view class="xiangce_list">
			<view class="xiangce_listt" @click="my_photo()">
				<view class="xiangce_list_txt">相册</view>
				<view class="right"><image src="../../static/images/icon_me_next-1417b7e1.png" mode="widthFix"></image></view>
			</view>
			<view class="xiangce_list_list_img">
				<view class="xiangce_list_img"><image src="../../static/images/w270_h270_qm.png" mode="widthFix"></image></view>
				<view class="xiangce_list_img"><image src="../../static/images/w270_h270_qm.png" mode="widthFix"></image></view>
				<view class="xiangce_list_img"><image src="../../static/images/w270_h270_qm.png" mode="widthFix"></image></view>
				<view class="xiangce_list_img"><image src="../../static/images/w270_h270_qm.png" mode="widthFix"></image></view>
			</view>
		</view>
		<view class="jczl_list">
			<view class="jczl">基础资料</view>
			<view class="set">
				<view class="set_list">
					<view class="set_list_left">ID</view>
					<view class="set_list_right5">84049515</view>
				</view>
				<view class="set_list">
					<view class="set_list_left">性别</view>
					<view class="set_list_right5">男</view>
				</view>
				<view class="set_list" @click="edit_nicheng()">
					<view class="set_list_left">昵称</view>
					<view class="set_list_rightt">
						<view class="nicheng">小骚货</view>
						<view class="set_list_right"><image src="../../static/images/icon_me_next-1417b7e1.png" mode="widthFix"></image></view>
					</view>
				</view>
				<picker  class="set_list" :itemStyle="pickerItemStyle" :range="customData" mode='selector' @change="customDataChange" @cancel="cancelSelect">
					<view class="set_list_left">年龄</view>
						<view class="set_list_rightt">
							<view class="nicheng">30</view>
							<view class="set_list_right"><image src="../../static/images/icon_me_next-1417b7e1.png" mode="widthFix"></image></view>
					</view>
				</picker>
				<picker class="set_list" :range="customData1" mode='selector' @change="customDataChange1" @cancel="cancelSelect1">
					<view class="set_list_left">身高</view>
					<view class="set_list_rightt">
						<view class="nichengg">你多高?</view>
						<view class="set_list_right"><image src="../../static/images/icon_me_next-1417b7e1.png" mode="widthFix"></image></view>
					</view>
				</picker>
				<picker class="set_list" :range="customData2" mode='selector' @change="customDataChange2" @cancel="cancelSelect2">
					<view class="set_list_left">体重</view>
					<view class="set_list_rightt">
						<view class="nichengg">你多重?</view>
						<view class="set_list_right"><image src="../../static/images/icon_me_next-1417b7e1.png" mode="widthFix"></image></view>
					</view>
				</picker>
				<picker class="set_list" :range="customData3" mode='selector' @change="customDataChange3" @cancel="cancelSelect3">
					<view class="set_list_left">职业</view>
					<view class="set_list_rightt">
						<view class="nichengg">你是做什么的?</view>
						<view class="set_list_right"><image src="../../static/images/icon_me_next-1417b7e1.png" mode="widthFix"></image></view>
					</view>
				</picker>
				<picker class="set_list" @change="bindPickerChange" @columnchange="pluginclass" :value="pickVal" :range="cityArr"
					range-key="AreaName" mode="multiSelector">
						<view class="set_list_left">常驻城市</view>
						<view class="set_list_rightt">
							<view class="nichengg">苏州市</view>
							<view class="set_list_right"><image src="../../static/images/icon_me_next-1417b7e1.png" mode="widthFix"></image></view>
						</view>
				</picker>
				<view class="set_list" @click="edit_qianming()">
					<view class="set_list_left">个性签名</view>
					<view class="set_list_rightt">
						<view class="nichengg">给大家介绍一下自己吧!</view>
						<view class="set_list_right"><image src="../../static/images/icon_me_next-1417b7e1.png" mode="widthFix"></image></view>
					</view>
				</view>
			</view>
		</view>
		
		<uni-forms ref="baseForm" >
			<uni-forms-item label="城市" required>
				<picker class="addRess" @change="bindPickerChange" @columnchange="pluginclass" :value="pickVal" :range="cityArr"
					range-key="AreaName" mode="multiSelector">
					<view v-if="pickVal2.length==0"></view>
					<view v-else class="uni-input">
						<text>{{cityArr[0][pickVal2[0]].AreaName}}</text>
						<text>{{cityArr[1][pickVal2[1]].AreaName}}</text>
						<text>{{cityArr[2][pickVal2[2]].AreaName}}</text>
					</view>
				</picker>
			</uni-forms-item>
		</uni-forms>
		
	</view>
</template>

<script>
	export default {
			data() {
				return {
					pickerItemStyle:{
						height:'16vw'
					},
					type:"left",
					 isPopupShow: false,
					// 自定义数据
					customData: [
						"18","19","20","21","22",
					    "23","24","25","26","27",
						"28","29","30","31","32",
						"33","34","35","36","37",
						"38","39","40","41","42",
						"43","44","45","46","47",
						"48","49","50","51","52",
						"53","54","55","56","57",
						"58","59","60","61","62",
						"63","64","65","66","67"],
						
						customData1: [
						"140","141","142","143","144",
						"145","146","147","148","149",
						"150","151","152","153","154",
						"155","156","157","158","159",
						"160","161","162","163","164",
						"165","166","167","168","169",
						"170","171","172","173","174",
						"175","176","177","178","179",
						"180","181","182","183","184",
						"185","186","187","188","189",
						"190","191","192","193","194",
						"195","196","197","198","199",
						"200"
						],
						customData2: [
						"30","31","32","33","34",
						"35","36","37","38","39",
						"40","41","42","43","44",
						"45","46","47","48","49",
						"50","51","52","53","54",
						"55","56","57","58","59",
						"60","61","62","63","64",
						"65","66","67","68","69",
						"70","71","72","73","74",
						"75","76","77","78","79",
						"80","81","82","83","84",
						"85","86","87","88","89",
						"90","91","92","93","94",
						"95","96","97","98","99",
						"100"
						],
						customData3: [
						"白领","主播","模特","护士","学生",
						"coser","老师","空姐","演员","艺术",
						"私教","自由职业","技术","运营","产品",
						"设计","市场","销售","财务","人事",
						"高管","创始人","互联网","金融","传媒",
						"旅游","物流","建筑","贸易","咨询",
						"国企","事业单位"
						],
						pickVal: [0, 0, 0], // 选择器默认值
						pickVal2:[],   // 辅助城市名字线索
						cityArr: [],   // 所有城市
				}
			},
			mounted() {
				// 页面初始化
				this.loadProvinces()
			},
			methods: {
				yulan_personal(){
					uni.navigateTo({
						url:'/pages/yulan_personal/yulan_personal'
					})
				},
				personal(){
					uni.navigateBack({
					            delta:1
					        });
				},
				my_photo(){
					uni.navigateBack({
					             delta:1
					        });
				},
				edit_nicheng(){
					uni.navigateTo({
					            url:'/pages/edit_nicheng/edit_nicheng'
					        });
				},
				edit_qianming(){
					uni.navigateTo({
					            url:'/pages/edit_qianming/edit_qianming'
					        });
				},
				
				
				
				
				
				
				
				
				
				close(type){
					this.type = type;
					this.$refs.popup.close()
				},
				toggle(type) {
				    this.type = type;
				    this.$refs['popup'].open();
				},
				// 点击完成按钮的时候触发，
				customDataChange(e) {
					//通过e.detail.value获取值，获取的是自定义数据的下标
					const val = e.detail.value
					console.log(val);
				},
				cancelSelect(e){
					console.log("您已取消选择");
				},
				
				customDataChange1(e) {
					//通过e.detail.value获取值，获取的是自定义数据的下标
					const val = e.detail.value
					console.log(val);
				},
				cancelSelect1(e){
					console.log("您已取消选择");
				},
				
				customDataChange2(e) {
					//通过e.detail.value获取值，获取的是自定义数据的下标
					const val = e.detail.value
					console.log(val);
				},
				cancelSelect2(e){
					console.log("您已取消选择");
				},
				
				customDataChange3(e) {
					//通过e.detail.value获取值，获取的是自定义数据的下标
					const val = e.detail.value
					console.log(val);
				},
				cancelSelect3(e){
					console.log("您已取消选择");
				},
				
				loadProvinces() { // 加载省份
					uni.request({
						url: 'http://test-api.tiananhub.com/api/province/GetListProvince',
						method: 'get',
						success: async (res) => {
							let {
								data
							} = res.data
							console.log(data)
							this.cityArr[0] = data
							this.loadCities(data[0].AreaId)
							this.$forceUpdate()
						},
						fail: async (res) => {}
					})
				},
				// 请求地级市
				loadCities(AreaId) {
					uni.request({
						url: 'http://test-api.tiananhub.com/api/province/GetListCity',
						data: {
							AreaId
						},
						method: 'get',
						success: async (res) => {
							let {
								data
							} = res.data
							this.cityArr[1] = data
							this.loadAreas(data[0].AreaId)
				
							this.$forceUpdate()
						},
						fail: async (res) => {}
					})
				},
				// 请求县区市
				loadAreas(AreaId) {
					uni.request({
						url: 'http://test-api.tiananhub.com/api/province/GetListCity',
						data: {
							AreaId
						},
						method: 'get',
						success: async (res) => {
							let {
								data
							} = res.data
							this.cityArr[2] = data
				
							this.$forceUpdate()
						},
						fail: async (res) => {}
					})
				},
				// 确定其他选择的值
				bindPickerChange(data) {
					this.pickVal=data.target.value;
					this.pickVal2=data.target.value;
					// 以下拓展区域业务逻辑
				},
				// 选择时且未点击确定是的值
				pluginclass(e) {
					console.log('修改的列为：' + e.detail.column + '，值为：' + e.detail.value)
					if (e.detail.column == 0) {
						this.loadCities(this.cityArr[0][e.detail.value].AreaId);
					}
					if (e.detail.column == 1) {
						this.loadAreas(this.cityArr[1][e.detail.value].AreaId);
					}
				}
				
			}
		}
</script>

<style>
  @import "../../static/css/edit_ziliao.css";
</style>
